<template>
    <div id="mingpinshangjia" >
      <HeaderStatus></HeaderStatus>
        <div class="mui-content" style="padding-top: 0;" id="list_box" >
            <div class="youhui_search" >
                <input type="text" name="search" disabled="disabled" id="search" placeholder="请输入商品名称搜索...">
                <i class="mui-icon mui-icon-closeempty"  ></i>
            </div>
            <div class="search-group-list" v-for="(i,k) in list" :key="k" @tap="open_shop_page(i)">
                <div class="item"  >
                    <div class="img fl">
                        <img  :src="i.pic" alt="">
                    </div>
                    <div class="info fl">
                        <span class="title"  >{{i.name}}</span>
                        <span class="des" v-html="i.desc"> </span>
                    </div>
                </div>
            </div>

		</div>
    </div>
</template>
<script>
  import HeaderStatus from "../../components/Header";
  import goods_ajax from '../../ajax/goods_ajax'
export default {
data(){
return {
    list:[]
  }
},
  mounted() {

  },
  methods:{
    get_shop_list(){
      goods_ajax.get_shop_list({
        bid:this.$store.state.account.community.sqid
      },res=>{
        this.list = res;
      })
    },
    open_shop_page(shop){
      console.log(shop);
      this.$store.commit("updata_mp_shop_info",shop)
      this.$router.push("/shop/mp_goods_list?sid="+shop.sid)
    }
  },

  created(){
    this.$store.commit("change_header", {
      header_text:"名品商家",
      header_right_func: false,
      header_right_html: "<span></span>",
      header_back_btn: true
    });
    this.get_shop_list()
  },
  components:{
    HeaderStatus
  }
};
function pullfresh_function() {
    setTimeout(() => {
        mui.toast("已刷新")
         mui('#mingpinshangjia').pullRefresh().endPulldown();
    }, 500);

}
</script>

<style lang="less" scoped>

@import "../../../static/pxvalue.less";


body,
html,
.mui-content {
  font-family: "微软雅黑";
  background-color: #FFFFFF;
  padding-bottom: 6.4rem;
  padding-top: 0.5973rem;
}
.mui-bar {
  border-bottom: 1px solid #c5c5c5;
}
.mui-bar .mui-segmented-control {
  top: 0;
}
.mui-segmented-control.mui-scroll-wrapper {
  height: 44px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
  height: 44px;
}
.mui-action-back {
  height: 44px;
  width: 44px;
}
.mui-action-back img {
  width: 100%;
}
.mui-title {
  height: 44px;
}
.nav {
  width: 1000px;
}
.fr {
  float: right;
}
.fl {
  float: left;
}
.mui-bar {
  top: 0.8533rem;
  font-size: 0.7253rem;
}
.hr_20 {
  height: 0.4267rem;
  background-color: #f6f6f6;
}
.ptsp_top_stats {
  height: 0.9387rem;
  width: 100%;
  z-index: 20;
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
}
.youhui_search {
  background-color: #f6f6f6;
  padding: 0.4267rem 0.64rem;
  position: relative;
}
.youhui_search input {
  height: 1.1947rem;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: 0 0 5px #ccc;
  border-radius: 0.5973rem;
  background-image: url(../../assets/images/search_03.png);
  background-repeat: no-repeat;
  background-position: 0.4267rem;
  padding-left: 1.1733rem;
  font-size: 0.512rem;
  background-size: 0.512rem 0.512rem;
}
.youhui_search i {
  position: absolute;
  top: 0.512rem;
  right: 1.0667rem;
}
.search-group-list {
  padding-left: 0.64rem;
  padding-right: 0.64rem;
  border-bottom: 1px solid #efefef;
}
.search-group-list .item {
  padding-top: 0.4267rem;
  padding-bottom: 0.4267rem;
  border-bottom: 1px solid #efefef;
  overflow: hidden;
}
.search-group-list .item .img {
  width: 3.2853rem;
  height: 3.2853rem;
  background-color: #ccc;
  margin-right: 0.768rem;
  overflow: hidden;
}
.search-group-list .item .img img {
  width: 100%;
}
.search-group-list .item .info {
  width: 10.6333rem;
  position: relative;
  height: 3.2853rem;
}
.search-group-list .item .info .title {
  font-size: 0.64rem;
  color: #313030;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.search-group-list p{
  font-size: 0.512rem !important;
}
.search-group-list .item .info .des {
  font-size: 0.512rem;
  color: #646464;
  display: block;
  overflow: hidden;
  height: 2.6rem;

}

.search-group-list .item .info .star i {
  display: inline-block;
  width: 0.4693rem;
  height: 0.4693rem;
  background-size: 100% 100%;
  background-image: url(../../assets/images/star_05.png);
  margin-left: 0.064rem;
}
.search-group-list .item .info .star .light {
  background-image: url(../../assets/images/star_03.png);
}
.search-group-list .item .info .bottom {
  font-size: 0.4693rem;
  width: 100%;
  color: #6c6c6c;
  position: absolute;
  bottom: 0;
  left: 0;
}
.search-group-list .item:last-child {
  border-bottom: none;
}
.mui-bar-nav ~ .mui-content {
  padding-top: 40px;
}

.search-group-list .item .info .des{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 1.9rem;
}

</style>

